<template>
	<div class="sitemanagement">
		<Nav></Nav>
		<div class="writing_right">
			<div class="TitleList">
				<div class="TitleList_padding">
					<div class="TitleList_top">
						<div class="TitleList_top_title"><span></span>站点管理</div>
						<div class="TitleList_top_btn">
							<router-link to="/writing/siteManagement/autoEprogram">添加站点</router-link>
						</div>
					</div>
				</div>
				<div class="myarticles" v-loading="loading" element-loading-spinner="el-icon-loading"
					element-loading-text="拼命加载中" element-loading-background="rgba(255, 255, 255, 1)">
					<div class="myarticles_content creation">
						<div class="myarticles_content_title">
							<div class="content_title_list">序号</div>
							<div class="content_title_list">站点名称</div>
							<div class="content_title_list">通信状态</div>
							<div class="content_title_list">接口版本</div>
							<div class="content_title_list">网址</div>
							<div class="content_title_list">今日发布</div>
							<div class="content_title_list">昨日发布</div>
							<div class="content_title_list">累计</div>
							<div class="content_title_list">锚链接</div>
							<div class="content_title_list">关键词库</div>
							<div class="content_title_list">操作</div>
						</div>
						<div class="myarticles_content_tab">
							<div class="content_tab_list" :class="{ on: info.checked }"
								v-for="(info, index) in infos.data" :key="index">
								<div class="tab_list_li">{{ info.id }}</div>
								<div class="tab_list_li images">
									<div class="testClik">
										<a :href="info.is_https==1?('https://'+info.website):('http://'+info.website)" target="_blank">{{ info.name }}</a>
										<a :href="'#/writing/siteManagement/InterfaceTest?id='+info.id" target="_blank" class="hovetest">测试发布</a>
									</div>
								</div>
								<div class="tab_list_li">
									<div class="list_li_state" v-if="info.isActive == 0"><span></span>等待请求...</div>
									<div class="list_li_state" v-if="info.isActive == 1"><span></span>通信正常</div>
									<div class="list_li_state on" v-if="info.isActive == -1"><span></span>通信异常</div>
								</div>
								<div class="tab_list_li">								
									<!--最新的-->
									<div class="list_li_state not_update" v-if="info.version_status == 'last'">
										<span></span>
										<p>{{info.version}}</p>
										<a>最新版</a>
									</div>
									<!--用户设置了禁止升级-->
									<div class="list_li_state need_update" v-else-if="info.version_status == 'no_upgrade'">
										<span></span>
										<p title="在接口文件里设置了version为[no_upgrade]禁止在线升级">禁止升级</p>
									</div>										
									<!--原始接口获取版本的接口请求返回错误，需要用户手动检查-->
									<div class="list_li_state need_update" v-else-if="info.version_status == 'error'">
										<span></span>
										<p>{{info.version}}</p>
										<a>接口版本获取错误，需要检查</a>
									</div>										
									<!--旧版本需要升级-->
									<div class="list_li_state need_update" v-else-if="info.version_status == 'old'">
										<span></span>
										<p>{{info.version}}</p>
										<a v-show="!updating" @click="update_plus(info.id)">升级</a>
										<p v-show="updating">升级中...</p>
									</div>
									<!--原始版本，不支持在线升级，需要用户手动升级-->
									<div class="list_li_state need_update" v-else-if="info.version_status == 'original'">
										<span></span>
										<p>1.0发布接口需要升级到2.0</p>
										<a href="https://www.ai-dog.net/news/notify/559.html" target="_blank">升级指导</a>
									</div>								
									<!--自定义站点接口不支持升级-->
									<div class="list_li_state" v-else-if="info.version_status == 'diy_site'">
										<span></span>
										<p>自定义站点</p><br>
									</div>
									<!--检测状态-->
									<div class="list_li_state" v-else>
										<span></span>
										<p>版本检测中</p>
									</div>									
								</div>
								<div class="tab_list_li">{{ info.website }}</div>
								<div class="tab_list_li color_a">
									<router-link :to="'/writing/releaselog?site_id=' + info.id + '&time=1'" target="_blank">{{ info.today_quantity }}</router-link>
								</div>
								<div class="tab_list_li color_a">
									<router-link :to="'/writing/releaselog?site_id=' + info.id + '&time=-1'" target="_blank">{{ info.yesterday_quantity }}</router-link>
								</div>
								<div class="tab_list_li color_a">
									<router-link :to="'/writing/releaselog?site_id=' + info.id" target="_blank">{{ info.cumulative_quantity }}</router-link>
								</div>
								<div class="tab_list_li">
									<span class="notBlue" @click="showLinkList(info)">{{info.link_count}}</span>
								</div>
								<div class="tab_list_li">
									<span class="notBlue" @click="showKeywordsLibrary(info)"><img src="@a/img/sv86.svg" />设置</span>
								</div>								
								<div class="tab_list_li operate">
									<div class="list_li_btn" @click="update(info.id)"><img src="@a/img/sv5.svg" />编辑
									</div>
									<div class="list_li_btn" @click="deleteInfo(index)"><img src="@a/img/sv6.svg" />删除
									</div>
									<div class="list_li_btn" @click="openNewWindow(info.id)"><img
											src="@a/img/sv11.svg" />日志</div>
								</div>
							</div>

							<div class="not_data not_data2" v-show="infos.data.length === 0">
								<div class="not_data_icon"><img src="@a/img/bg26.jpg" /></div>
								<div class="not_data_title">暂无站点</div>
							</div>
						</div>
					</div>
					<div class="page">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="infos.current_page" :page-sizes="per_pages" :page-size="infos.per_page"
							layout="total, sizes, prev, pager, next, jumper" :total="infos.total">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		
		
		


		<!-- 关键词锚文本 -->
		<div class="Preview" v-show="showLog">
			<div class="Preview_content">
				<div class="Preview_content_title">
					<div class="content_title_left"><span></span>关键词锚文本</div>
					<div class="content_title_right" @click="showLog = !showLog"><i class="el-icon-close"></i></div>
				</div>
				<div class="KeyWords">
					<div class="KeyWordsTop">
						<div class="KeyWordsTop_list">序号</div>
						<div class="KeyWordsTop_list">关键词</div>
						<div class="KeyWordsTop_list">链接</div>
						<div class="KeyWordsTop_list">操作</div>
					</div>
					<div class="KeyWordsContent ovauto">
						<div class="KeyWordsContent_list" v-for="(item,index) in linkList" :key="index">
							<div class="KeyWordsContent_list_li">
							{{index+1}}
							</div>
							<div class="KeyWordsContent_list_li" :class="{ active: item.isActive }">
								<b :class="{ active: item.isActive }">{{item.name}}</b>
								<input type="text" v-model="item.name" />
							</div>
							<div class="KeyWordsContent_list_li" :class="{ active: item.isActive }">
								<a :href="item.url" target="_blank"  :class="{ active: item.isActive }">{{item.url}}</a>
								<input type="text" v-model="item.url" />
							</div>
							<div class="KeyWordsContent_list_li" :class="{ active: item.isActive }">
								<div class="list_li_btn" @click="toggleActive2(index)"> 
									<img src="@a/img/sv5.svg" />
									<span v-if="!item.isActive">编辑</span>
									<span v-if="item.isActive">保存</span>
								</div>
								
								<div class="list_li_btn" @click="deleteInfo2(index)"><img src="@a/img/sv6.svg" />删除</div>
							</div>
						</div>
					</div>
					<div class="KeyWordsBottom"><img src="@a/img/sv47.svg" />在发布文章内容中如果出现以下关键词为自动加上对应的超链接，<br>加上超链接的关键词更有利于搜索引擎优化</div>
					<div class="KeyWordsBtn notBlue" @click="addLink()"><span>添加锚文本</span></div>
				</div>
			</div>
		</div>
		
		<!-- 关键词库 -->
		<div class="Preview" v-show="keywords_library_show">
			<div class="Preview_content">
				<div class="Preview_content_title">
					<div class="content_title_left"><span></span>关键词库过滤</div>
					<div class="content_title_right" @click="keywords_library_show = !keywords_library_show"><i class="el-icon-close"></i></div>
				</div>
				<div class="KeyWords">
					<el-input type="textarea" :rows="20" placeholder="关键词1,关键词2" v-model="keywords_library"></el-input>
				</div> 
				<div class="content_list_hint"><img src="@a/img/sv47.svg">每个关键词用,号隔开。<br>如果添加关键词过滤后，在发布文章后会默认匹配当前关键词库里对应的关键词，匹配的数量为3-6个之间。如果留空的话会默认调用AI生成的关键词发布到站点里的keywords和tags里。</a>
				</div>				
				<div class="Edit_btn">
					<button class="save" @click="setKeywordsLibrary()">保存</button>
				</div>				
			</div>
		</div>

	</div>
</template>

<script>
	import Nav from "@c/common/nav/nav";
	import {
		Message,
		MessageBox
	} from 'element-ui';
	import axios from "axios";

	export default {

		name: "siteManagement",
		data() {
			return {
				infos: {
					data: [],
					per_page: 20,
					current_page: 1,
					last_page: 1,
					total: 0
				},
				per_pages: [20, 50, 100 ,200],
				showLog: false,
				site_id:0,
				keywords_library:'',
				keywords_library_show:false,
				linkList:[],
				currentSite:[],
				loading: true,
				updating:false,
			};
		},
		components: {
			Nav
		},
		methods: {
			//在线升级
			update_plus(site_id){
				this.updating=true
				this.axios.get('/api/Site/updatePlus', {
					params: {
						site_id: site_id,
					}
				}).then(res => {
					if(res.code){
						Message.success('升级成功！')
						this.updating=false
						this.getList()
					}
				})
			},
			//分类设置保存、编辑
			toggleActive2(index) {
				let that = this;
				let thisData = this.linkList[index];
				// 新增或修改
				if (thisData.isActive) {
					that.axios.post('/api/SiteLink/add', {
						id: thisData.id,
						name: thisData.name,
						site_id: this.currentSite.id,
						url: thisData.url
					}).then(res => {
						if (res.code == 1) {
							Message.success('保存成功！')
							this.showLinkList(this.currentSite)
						}
					})
				}
				this.linkList[index].isActive = !thisData.isActive
			},			
			//打开站点锚链接列表
			showLinkList(site){
				this.showLog=true;
				this.currentSite=site;
				this.axios.get('/api/SiteLink/list', {
					params: {
						site_id: site.id,
					}
				}).then(res => {
					if(res.result){
						res.result.forEach(item => {
							item.isActive = false
						})
						this.linkList=res.result;
					}
				})

			},
			//新增加链接
			addLink(){
				//获取当前站点信息
				let url="";
				if(this.currentSite.is_https){
					url="https://"+this.currentSite.website;
				}else{
					url="http://"+this.currentSite.website;
				}
				this.linkList.push({
					id: 0,
					site_id: this.currentSite.id,
					name: '',
					url:url,
					isActive: true
				});				
				//

			},
			//关键词库
			showKeywordsLibrary(info){
				this.site_id=info.id;
				this.keywords_library_show=true;
				this.keywords_library='';
				this.axios.get('/api/Site/showKeywordsLibrary', {
					params: {
						site_id: info.id,
					}
				}).then(res => {
					if(res.result){
						this.keywords_library=res.result.keywords_library;
					}
				})				
			},
			//关键词库
			setKeywordsLibrary(){
				this.keywords_library_show=true;
				this.axios.post('/api/Site/setKeywordsLibrary', {
					site_id: this.site_id,
					keywords_library: this.keywords_library,
				}).then(res => {
					this.keywords_library_show=false;
				})				
			},			
			//分类链接
			deleteInfo2(index) {
				let that = this;
				const item = this.linkList[index];
				MessageBox.confirm(`确定删除${item.name}吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.axios.post('/api/SiteLink/delete', {
						id: item.id
					}).then(res => {
						if (res.code == 1) {
							that.class_type = '';
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							that.showLinkList(this.currentSite)
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
					// 用户点击取消或者弹窗关闭时不做任何操作
				});
			},
			
			
			
			//
			update(id) {
				console.log(id)
				this.$router.push({
					path: '/writing/siteManagement/parameterSettings',
					query: {
						sid: id,
					}
				})
			},
			//分页
			handleSizeChange(val) {
				this.infos.per_page = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.infos.current_page = val
				this.getList()

			},
			//新窗口打开
			openNewWindow(id, time = 0) {
				if (time === 1) {
					window.open('#/writing/releaselog?site_id=' + id + '&time=1', '_blank', 'noopener');
				}
				if (time === -1) {
					window.open('#/writing/releaselog?site_id=' + id + '&time=-1', '_blank', 'noopener');

				}
				window.open('#/writing/releaselog?site_id=' + id, '_blank', 'noopener');
			},
			getList() {
				// loading 开始
				this.loading = true; 

				let that = this;
				that.axios.get('/api/site/list', {
					params: {
						page: that.infos.current_page,
						list_rows: that.infos.per_page,
					}
				}).then(res => {
					// loading结束
					this.loading = false;

					that.infos = res.result;
					//如果没有则直接跳转到对接页面
					if(!that.infos.total){
					  this.$router.push({ path: '/writing/siteManagement/autoEprogram'});
					}
					//
					for (let i in that.infos.data) {
						let url = that.infos.data[i]['url'];
						that.axios.post('/api/site/urlIsNormal', {
							url: url
						}).then(res => {
							if (res.code === 1) {
								that.infos.data[i]['isActive'] = res.result
							}
						})
					}
					//检测版本
					this.checkVersion(0)				
				})
			},
			//检测版本
			checkVersion(i){
				if(i>= this.infos.data.length)return
				let id = this.infos.data[i]['id'];
				if(id){
					this.axios.post('/api/site/checkVersion', {
						id: id
					}).then(res => {
						if (res.code === 1) {
							this.$set(this.infos.data[i], 'version_status', res.result.version_status);
							this.$set(this.infos.data[i], 'version', res.result.version);
						}
						this.checkVersion(i+1)
					})
				}

			},
			//删除
			deleteInfo(index) {
				let that = this;
				const item = this.infos.data[index];
				MessageBox.confirm(`确定删除${item.name}吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.axios.post('/api/site/delete', {
						id: item.id
					}).then(res => {
						if (res.code === 1) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							that.getList()
						}
					})


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
					// 用户点击取消或者弹窗关闭时不做任何操作
				});
			},
		},
		created() {
			this.getList()
		},
	}
</script>

<style>
	@import "siteManagement.css";
</style>
